- hide_class = 'gl-hidden' if form_errors(@trigger)

.row.gl-mt-3.gl-mb-3
  .gl-col-lg-12
    = render ::Layouts::CrudComponent.new(_("Active pipeline trigger tokens"),
      icon: 'token',
      count: @triggers.size,
      options: { class: 'js-toggle-container' },
      form_options: { class: 'gl-hidden js-toggle-content', form_errors: form_errors(@trigger) }) do |c|
      - c.with_actions do
        = render Pajamas::ButtonComponent.new(size: :small, category: :tertiary, button_options: { data: { testid: 'reveal-hide-values-button' } }) do
          = _('Reveal values')
        = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content #{hide_class}" }) do
          = _('Add new token')

      - c.with_form do
        %h4.gl-mt-0
          = _('Add new pipeline trigger token')
        = render Pajamas::AlertComponent.new(variant: :danger, alert_options: { class:  'gl-mb-5 gl-pb-2' }, dismissible: false) do |c|
          - keep_tokens_secure_link = link_to(s_('PipelineTriggerTokens|How can I keep my tokens secure?'), help_page_path('security/tokens/_index.md', anchor: 'security-considerations'), target: '_blank', rel: 'noopener noreferrer')
          - c.with_body do
            %p
              = s_('PipelineTriggerTokens|It is a security risk to save tokens in plain text in your project, or store them in a way that malicious users could access them. A leaked trigger token could be used to force an unscheduled deployment, attempt to access CI/CD variables, or other malicious uses. %{keep_tokens_secure_link}').html_safe % { keep_tokens_secure_link: keep_tokens_secure_link }
        = render 'projects/triggers/form', btn_text: s_('PipelineTriggerTokens|Create pipeline trigger token'), show_cancel_button: true

      - c.with_body do
        #js-ci-pipeline-triggers-list.triggers-list{ data: { triggers: @triggers_json } }

    %details.gl-mt-5.gl-border.gl-rounded-base
      %summary.gl-py-3.gl-px-5.gl-font-semibold
        = _("View trigger token usage examples")
      .gl-p-5
        %p.gl-text-subtle
          = _("These examples show common methods of triggering a pipeline with a pipeline trigger token. The URL and ID for this project is prefilled.")

        %p.gl-text-subtle
          = _('In each example, replace %{code_start}TOKEN%{code_end} with the trigger token you generated and replace %{code_start}REF_NAME%{code_end} with the branch or tag name.').html_safe % { code_start: '<code>'.html_safe, code_end: '</code>'.html_safe }

        %h5.gl-mt-3
          = _('Use cURL')

        %pre
          :plain
            curl -X POST \
                 --fail \
                 -F token=TOKEN \
                 -F ref=REF_NAME \
                 #{builds_trigger_url(@project.id)}
        %h5.gl-mt-3
          = _('Use .gitlab-ci.yml')

        %pre
          :plain
            script:
              - "curl -X POST --fail -F token=TOKEN -F ref=REF_NAME #{builds_trigger_url(@project.id)}"
        %h5.gl-mt-3
          = _('Use webhook (POST requests only)')

        %pre
          :plain
            #{builds_trigger_url(@project.id, ref: 'REF_NAME')}?token=TOKEN
        %h5.gl-mt-3
          = _('Pass job variables')

        %p.gl-text-subtle
          = _('To pass variables to the triggered pipeline, add %{code_start}variables[VARIABLE]=VALUE%{code_end} to the API request.').html_safe % { code_start: '<code>'.html_safe, code_end: '</code>'.html_safe }

        %p.gl-text-subtle
          = _('cURL:')

        %pre
          :plain
            curl -X POST \
                 --fail \
                 -F token=TOKEN \
                 -F "ref=REF_NAME" \
                 -F "variables[RUN_NIGHTLY_BUILD]=true" \
                 #{builds_trigger_url(@project.id)}
        %p.gl-text-subtle
          = _('Webhook (POST requests only):')

        %pre.gl-mb-0
          :plain
            #{builds_trigger_url(@project.id, ref: 'REF_NAME')}?token=TOKEN&variables[RUN_NIGHTLY_BUILD]=true
